<template>
  <div class="page_inner enterpriseusersdetails">
    <el-row>
      <el-col :span="24">
        <div class="page_inner_top">
          <span class="page_inner_top_tit">用户中心 / 企业用户 / 企业详情</span>
          <!-- <span class='page_inner_top_back'>返回</span> -->
          <el-button class='fa_hui' plain size='small'>返回</el-button>
          <el-button class='qu_xiao' plain size='small'>禁用</el-button>
          <el-button class='xu_yue' plain size='small'>修改</el-button>
          <el-button class='x_gai' plain size='small'>升级代理商</el-button>
        </div>
      </el-col>
    </el-row>
    <div class="line" style="border-bottom: 2px solid #f2f2f2;margin-top: 20px;"></div>
    <div class="page_base">
      <el-row>
        <el-col :span="24">
          <div class="base_tits">
            基本信息
          </div>
        </el-col>
      </el-row>
      <div class="page_base_center">
          <el-container>
            <el-aside class="page_base_center_left" width="102px">
              <div class="fang" style="border:1px solid #f2f2f2">
                <img src="~assets/images/5.jpg" alt="">
              </div>
              <div style="font-size:16px; color:#606266;font-family: PingFang-SC-Semibold;margin-top: 10px;margin-bottom: 10px;">企业用户</div>
              <div style="color: red;border-radius:10px;background:#00c850;width:60px;margin:0 auto;color: #fff;width:60px;height:20px;font-size:12px;line-height:20px;">已认证</div>
            </el-aside>
            <el-main class="page_base_center_right">
              <div class="biaoge_left biaoge">
                <el-row>
                  <el-col :span="6"><div class="biaoge_tit">ID</div></el-col>
                  <el-col :span="18"><div class="biaoge_tit1">11221312</div></el-col>
                </el-row>
                <el-row>
                  <el-col :span="6"><div class="biaoge_tit">手机号</div></el-col>
                  <el-col :span="18"><div class="biaoge_tit1">13761936614</div></el-col>
                </el-row>
                <el-row>
                  <el-col :span="6"><div class="biaoge_tit">企业性质</div></el-col>
                  <el-col :span="18"><div class="biaoge_tit1">民营</div></el-col>
                </el-row>
                <el-row>
                  <el-col :span="6"><div class="biaoge_tit">公司地址</div></el-col>
                  <el-col :span="18"><div class="biaoge_tit1">北京市海淀区彩和坊路8号</div></el-col>
                </el-row>
                <el-row>
                  <el-col :span="6"><div class="biaoge_tit">联系人手机</div></el-col>
                  <el-col :span="18"><div class="biaoge_tit1">13761936614</div></el-col>
                </el-row>
                <el-row >
                  <el-col :span="6"><div class="biaoge_tit" style="border-bottom: 0">注册时间</div></el-col>
                  <el-col :span="18"><div class="biaoge_tit1" style="border-bottom: 0">2016-10-20 18:14:50</div></el-col>
                </el-row>

              </div>
              <div class="biaoge_right biaoge">
                <el-row>
                  <el-col :span="6"><div class="biaoge_tit">公司名称</div></el-col>
                  <el-col :span="18"><div class="biaoge_tit1">打零工互联网科技公司</div></el-col>
                </el-row>
                <el-row>
                  <el-col :span="6"><div class="biaoge_tit">公司简称</div></el-col>
                  <el-col :span="18"><div class="biaoge_tit1">打零工</div></el-col>
                </el-row>
                <el-row>
                  <el-col :span="6"><div class="biaoge_tit">所属行业</div></el-col>
                  <el-col :span="18"><div class="biaoge_tit1">--</div></el-col>
                </el-row>
                <el-row>
                  <el-col :span="6"><div class="biaoge_tit">联系人</div></el-col>
                  <el-col :span="18"><div class="biaoge_tit1">史蒂</div></el-col>
                </el-row>
                <el-row>
                  <el-col :span="6"><div class="biaoge_tit">联系人邮箱</div></el-col>
                  <el-col :span="18"><div class="biaoge_tit1">@gongren.com</div></el-col>
                </el-row>
                <el-row >
                  <el-col :span="6"><div class="biaoge_tit" style="border-bottom:0">注册来源</div></el-col>
                  <el-col :span="18"><div class="biaoge_tit1" style="border-bottom:0">IOS</div></el-col>
                </el-row>
              </div>
            </el-main>
          </el-container>
      </div>
    </div>
    <div class="page_base zhanghu_base">
      <el-row>
        <el-col :span="24">
          <div class="base_tits">
            账户信息
          </div>
        </el-col>
      </el-row>
      <div class="page_base_center">
        <div class="zhanghu_base_top">
          <div class="zhanghu_left">
            企业认证
          </div>
          <div class="zhanghu_right">
            <div class="xinxi_"> <span class="xinxi_tit">认证状态:</span> <span>已认证</span></div>
            <div class="xinxi_"> <span class="xinxi_tit">统一社会信用代码:</span> <span>91110108MA06YC119</span></div>
            <div class="xinxi_"> <span class="xinxi_tit">营业期限:</span> <span>2016.09.09-2026.09.09</span></div>
            <div class="xinxi_"> <span class="xinxi_tit">文件查看:</span>
            <span style="cursor: pointer;margin-right:20px;color:blue">营业执照</span>
            </div>
            <div class="xinxi_"> <span class="xinxi_tit">注册地址</span> <span>北京市彩和坊路8号5层512-06</span></div>
          </div>
        </div>
        <div class="zhanghu_base_bottom">
          <div class="zhanghu_left">
            支付方式
          </div>
          <div class="zhanghu_right">
            <div class="xinxi_"> <span class="xinxi_tit">银行卡:</span> <span>6214850213851469</span></div>
            <div class="xinxi_"> <span class="xinxi_tit">支付宝:</span> <span>rcw.ivan521@163.com</span></div>
            <div class="xinxi_"> <span class="xinxi_tit">微信:</span> <span>未绑定</span></div>
          </div>
        </div>
      </div>
    </div>
    <div class="page_base chengzhi_base">
      <el-row>
        <el-col :span="24">
          <div  class="base_tits">
            <span>橙子信息</span>
            <span style="font-size:12px;color:#aca9a9;margin-left: 30px; ">单位：元</span>
          </div>
        </el-col>
      </el-row>
      <div class="page_base_center" style="padding-bottom:0">
        <div class="chengzi_top">
          <el-row>
            <el-col :span="24">
              <div style="text-align:left;margin-bottom: 20px;">
                <span style="color: #909399">余额：</span> <span>2010元</span>
                <span style="color:#aca9a9;margin-left: 30px; ">可提现余额：2000元</span>
                <span style="color:#aca9a9;margin-left: 30px; ">不可提现余额：10元</span>
              </div>
            </el-col>
          </el-row>
          <div class="chengzi_center">
            <template>
              <el-table
                :data="tableData2"
                style="width: 100%">
                <el-table-column prop="date" label="交易时间"  align='center'></el-table-column>
                <el-table-column prop="type" label="交易类型"  align='center'></el-table-column>
                <el-table-column prop="jine" label="交易金额"  align='center'> </el-table-column>
                <el-table-column prop="zhuangtai" label="交易状态"  align='center'></el-table-column>
                <el-table-column prop="beizhu" label="备注说明"  align='center'> </el-table-column>
              </el-table>
            </template>
            <div style='margin-top:20px;margin-bottom:20px;text-align:right' class="block">
                <el-pagination @current-change="handleCurrentChange1" :current-page="currentPage1"
                    @size-change="handleSizeChange1"
                    :page-size="curPageSize1"
                    layout=" total,sizes, pager, next"
                    :total="tableDataLength1">
                </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page_base fadan_list">
      <el-row>
        <el-col :span="24">
          <div  class="base_tits">
            发单列表
          </div>
        </el-col>
      </el-row>
      <div class="page_base_center" style="border: 0;">
        <template>
            <el-table
              :data="tableData2"
              style="width: 100%">
              <el-table-column prop="date" label="交易时间"  align='center'></el-table-column>
              <el-table-column prop="type" label="交易类型"  align='center'></el-table-column>
              <el-table-column prop="jine" label="交易金额"  align='center'> </el-table-column>
              <el-table-column prop="zhuangtai" label="交易状态"  align='center'></el-table-column>
              <el-table-column prop="beizhu" label="备注说明"  align='center'> </el-table-column>
            </el-table>
          </template>
          <div style='margin-top:20px;margin-bottom:30px;text-align:right' class="block">
              <el-pagination @current-change="handleCurrentChange1" :current-page="currentPage1"
                  @size-change="handleSizeChange1"
                  :page-size="curPageSize1"
                  layout=" total,sizes, pager, next"
                  :total="tableDataLength1">
              </el-pagination>
          </div>
      </div>
    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        //当前页数
    currentPage1: 1,
    //总条数
    tableDataLength1: 100,
    //每页显示的条数
    curPageSize1: 4,
    tableData2: [
          {
              date: '2018-10-10 20:12:40',
              type: '充值',
              jine: '200.00',
              zhuangtai:"交易失败",
              beizhu:"支付宝充值"

            },
            {
              date: '2018-10-10 20:12:40',
              type: '充值',
              jine: '200.00',
              zhuangtai:"交易失败",
              beizhu:"支付宝充值"

            },
            {
              date: '2018-10-10 20:12:40',
              type: '充值',
              jine: '200.00',
              zhuangtai:"交易失败",
              beizhu:"支付宝充值"

            },
            {
              date: '2018-10-10 20:12:40',
              type: '充值',
              jine: '200.00',
              zhuangtai:"交易失败",
              beizhu:"支付宝充值"

            }
        ],
      }
    },
    methods: {
      //每页显示条数改变时
      handleSizeChange1(val) {
          this.curPageSize1 = val;
          // this.params.pageSize = this.curPageSize;
          // this.local_list_data()
      },
      //翻页的时候触发
      handleCurrentChange1(val) {
          var _self = this;
          _self.currentPage1 = val
          // _self.params.pageNo = _self.currentPage
          // window.sessionStorage.pagess = _self.currentPage
          // _self.local_list_data()
      },
    },
  }
</script>
<style lang="scss">
  .enterpriseusersdetails {
    .page_inner_top {
      position: relative;
      .fa_hui {
        position: absolute;
        right: 0px;
        top: -5px;
      }
      .qu_xiao {
        position: absolute;
        right: 80px;
        top: -5px
      }
      .xu_yue {
        position: absolute;
        right: 160px;
        top: -5px;
      }
      .x_gai {
        position: absolute;
        right: 240px;
        top: -5px;
      }
    }
    .page_base {
      background: #fff;
      box-sizing: border-box;
      .page_base_center {
        margin-top: 20px;
        border-bottom: 1px solid #f2f2f2;
        padding-bottom: 20px;
        .el-table {
          border: 0;
        }
      }
      .page_base_center_left {
        margin-right: 40px;
        .fang {
          width: 100px;
          height: 100px;
          border-radius: 10px;
          background: #fff;
          img {
            width: 100px;
            height: 100px;
            cursor: pointer;
          }
        }
      }
      .page_base_center_right {
        font-size: 14px;
        height:302px;
        box-sizing: border-box;
        border: 1px solid #f2f2f2;
        border-right: 0;
        padding: 0;
        .biaoge {
          width: 50%;
          float:left;
          .biaoge_tit {
            box-sizing: border-box;
            border-bottom: 1px solid #f2f2f2;
            background:#f2f6fc;
            height: 50px;
            color: #909399;
            line-height: 49px;
          }
          .biaoge_tit1 {
            box-sizing: border-box;
            border-bottom: 1px solid #f2f2f2;
            border-right: 1px solid #f2f2f2;
            height: 50px;
            line-height: 49px;
            text-align: left;
            padding-left: 20px;

          }
        }
      }
    }
    .zhanghu_base {
      .zhanghu_base_top {
        box-sizing: border-box;
        height: 180px;
        .zhanghu_left {
          box-sizing: border-box;
          border: 1px solid #f2f2f2;
          width: 120px;
          border-radius: 4px;
          font-family: PingFang-SC-Regular;
          background: #f2f6fc;
          float: left;
          color: #909399;
          height:180px;
          font-size: 14px;
          line-height: 180px;
        }
        .zhanghu_right {
          box-sizing: border-box;
          border: 1px solid #f2f2f2;
          border-left: 0;
          height: 180px;
          // color: #606266;
          float: left;
          width: calc(100% - 120px);
          text-align: left;
          padding: 10px 0 0 20px;
          font-size: 14px;
          .xinxi_ {
            height: 32px;
            .xinxi_tit {
              margin-right: 5px;
            }
          }
        }
      }
      .zhanghu_base_bottom {
        box-sizing: border-box;
        height: 120px;
        .zhanghu_left {
          box-sizing: border-box;
          border: 1px solid #f2f2f2;
          border-top: 0;
          width: 120px;
          background: #f2f6fc;
          float: left;
          height:120px;
          font-size: 16px;
          color: #909399;
          line-height: 120px;
        }
        .zhanghu_right {
          box-sizing: border-box;
          border: 1px solid #f2f2f2;
          border-left: 0;
          border-top: 0;
          height: 120px;
          float: left;
          width: calc(100% - 120px);
          text-align: left;
          padding: 10px 0 0 20px;
          font-size: 14px;
          .xinxi_ {
            height: 32px;
            .xinxi_tit {
              margin-right: 5px;
            }
          }
        }
      }

    }
    .jiedan_list {
      margin-top: 20px;
    }
  }
</style>
